<template>
  <div 
    class="svg-card"
    :class="{ 'custom-created': svg.category === 'Custom' }"
  >
    <!-- SVG 预览区域 -->
    <div class="svg-preview-area" @click="openDetail">
      <div class="svg-display" v-html="svg.content"></div>
      <div class="preview-overlay">
        <div class="preview-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
          </svg>
        </div>
        <span class="preview-text">查看详情</span>
      </div>
    </div>
    
    <!-- 卡片信息 -->
    <div class="card-content">
      <div class="card-header">
        <h3 class="svg-title">{{ svg.displayName }}</h3>
        <span class="category-tag">{{ svg.category }}</span>
      </div>
      
      <p class="svg-description">{{ svg.description }}</p>
      
      <div class="tags-container">
        <span 
          v-for="tag in svg.tags" 
          :key="tag"
          class="tag"
        >
          {{ tag }}
        </span>
      </div>
      
      <div class="card-actions">
        <button 
          @click="handleToggleFavorite"
          :class="['action-button', 'favorite-btn', { 'favorited': svg.isFavorited }]"
          title="收藏"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" 
                  :stroke="svg.isFavorited ? 'none' : 'currentColor'" 
                  :fill="svg.isFavorited ? 'currentColor' : 'none'"
                  stroke-width="2"/>
          </svg>
        </button>
        <button 
          @click="handleDownload"
          class="action-button download-btn"
          title="下载"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
            <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
            <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        <button 
          @click="openInEditor"
          class="action-button edit-btn"
          title="编辑"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button 
          @click="openDetail"
          class="action-button detail-btn"
          title="查看详情"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2"/>
            <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 定义 props
const props = defineProps({
  svg: {
    type: Object,
    required: true
  }
})

// 定义 emits
const emit = defineEmits(['toggle-favorite', 'download', 'preview'])

// 事件处理函数
const handleToggleFavorite = () => {
  emit('toggle-favorite', props.svg)
}

const handleDownload = () => {
  emit('download', props.svg)
}

const openInEditor = () => {
  // 将选中的 SVG 数据保存到 localStorage
  localStorage.setItem('selectedSvgForEdit', JSON.stringify(props.svg))
  
  // 跳转到编辑器页面
  router.push('/preview')
}

const openDetail = () => {
  // 将选中的 SVG 数据保存到 localStorage
  localStorage.setItem('selectedSvgDetail', JSON.stringify(props.svg))
  
  // 跳转到详情页面
  router.push('/detail')
}
</script>

<style scoped>
.svg-card {
  background: white;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  border: 1px solid #f3f4f6;
}

.svg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.svg-card.custom-created {
  border: 2px solid #10b981;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  position: relative;
}

.svg-card.custom-created::before {
  content: "✨ Created";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #10b981;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

.svg-card.custom-created:hover {
  border-color: #059669;
  box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.15);
}

.svg-preview-area {
  height: 200px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  position: relative;
}

.svg-preview-area:hover .preview-overlay {
  opacity: 1;
}

.svg-display {
  max-width: 80%;
  max-height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-display svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
}

.preview-icon {
  margin-bottom: 8px;
}

.preview-text {
  font-size: 0.9rem;
  font-weight: 500;
}

.card-content {
  padding: 24px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.svg-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}

.category-tag {
  background: #e5e7eb;
  color: #6b7280;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.svg-card.custom-created .category-tag {
  background: #10b981;
  color: white;
}

.svg-description {
  color: #6b7280;
  font-size: 0.95rem;
  margin-bottom: 16px;
  line-height: 1.5;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.tag {
  background: #f3f4f6;
  color: #4b5563;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
}

.card-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.action-button {
  width: 44px;
  height: 44px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.action-button:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.favorite-btn.favorited {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.download-btn:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.edit-btn:hover {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}

.detail-btn:hover {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #f59e0b;
}
</style>
